<template>
<div>
  <Header></Header>
  <div style="max-width: 1200px; margin:auto;padding:10px;">
    <el-row style="margin-top: 45px;margin-bottom: 40px;background-color: white;padding:20px;box-shadow:0 2px 5px 0 rgba(0 0 0 0.05); ">
      <el-col :span="16" style="display: flex">
        <div style="border: 1px solid #fdb851;padding: 3px 9px;color: #fdb851;margin: 5px 8px;border-radius: 5px;font-size: 13px;height: 19px;">
          示例
        </div>
        <div style="font-size: 25px;display: flex;">
          {{project.name}}&nbsp;
        </div>

      </el-col>
      <el-col :span="8">
        <div class="btnleft" @click="run(project)">
          <i v-if="!loading" class="el-icon-check" ></i>
          <i v-if="loading" class="el-icon-loading"></i>
          动手试试
        </div>
      </el-col>
    </el-row>
    <iframe   @copy.native.capture.prevent='handCopy' :src="'http://152.136.26.199/data/'+id" style="width: 100%;height: 580px;border: medium none;" ></iframe>
  </div>
</div>
</template>

<script>
import Header from "@/components/Header";
export default {
  name: "Project_example",
  components: {Header},
  data(){
    return{
      id:this.$route.query.id,
      username:localStorage.getItem("username"),
      project:{},
      url:null,
      loading:false,
    }
  },
  methods:{

    run(pro){
      this.loading = true;

      this.$axios.get('project/clonetry/',{
        params:{
          id:pro.id,
          token:localStorage.getItem("token"),
        }
      }).then(res=>{
        if(res.data == 0){
          this.clone(pro);
        }else{
          this.$confirm('您之前已fork过该项目, 是否直接访问?', '提示', {
            confirmButtonText: '访问项目',
            cancelButtonText: '仍然fork',
            type: 'info'
          }).then(()=>{
            this.$router.push('project/?id='+res.data);
          }).catch(() => {
            this.clone(pro);
          })

        }
      })



    },
    clone(pro){
      this.$axios.post('project/clone/',{
        token:localStorage.getItem("token"),
        id:pro.id
      }).then(res=>{
        this.loading = false;
        if(res.status === 200){
          console.log(window.location.host + '/project?id='+res.data.id)
          window.open(window.location.origin + '/project?id='+res.data.id)
          // this.$router.push('project?id='+res.data.id)
        }else{
          this.$notify.error({
            title: '错误',
            message: res.data,
          });
        }
      })
    }
  },
  mounted() {
    this.$axios('project/get/',{
      params:{
        id:this.id,
        token:localStorage.getItem('token')
      }
    }).then(res=>{
      if(res.status === 200){
        this.project = res.data
      }else{
        this.$notify.error({
          title: '错误',
          message: res.data
        });
      }
    })
  },
}
</script>

<style scoped>
.btnleft{
  width: 120px;
  height: 32px;
  line-height: 30px;
  border: 1px solid #739631;
  background-color: #9dc15b;
  font-size: 14px;
  color: #333;
  text-align: center;
  float: right;
  margin-right: 50px;
  cursor: pointer;
}
</style>